import echarts from 'echarts'

const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $mychart: {
      get() {
        return {
          //画一条简单的线
          line1: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
              }]
            };

            this.chart.setOption(optionData);
          },
          //画饼
          mycookie: function (id, mychartdata, mycharseriesdata, titleText) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            // PV 1,625
            const optionData = {
              title: {
                text: titleText,
                // subtext: '纯属虚构',
                // x: 'right',
                top: 20,
                right: 100
              },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: mychartdata
              },
              series: [
                {
                  name: mychartdata,
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: mycharseriesdata,
                  itemStyle: {
                    color: '#a6d9ff',
                    // 24A2FF
                    // A6D9FF
                    // 66BAFF
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                      color: function (params) {
                        //自定义颜色
                        var colorList = [
                          '#A6D9FF', '#66BAFF', '#24A2FF'
                        ];
                        return colorList[params.dataIndex]
                      }
                    }
                  }
                }
              ]
            };

            this.chart.setOption(optionData);
          },
          mycookie2: function (id, mychartdata, mycharseriesdata, titleText) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            // PV 1,625
            const optionData = {
              title: {
                text: titleText,
                // subtext: '纯属虚构',
                // x: 'right',
                top: 20,
                right: 100
              },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: mychartdata
              },
              series: [
                {
                  name: "占比",
                  type: "pie",
                  radius: ["50%", "70%"],
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: false,
                      position: "center"
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: "20",
                        fontWeight: "bold"
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data: [{ value: 35, name: "成交转化率" }, { value: 310, name: "" }]
                  ,
                  itemStyle: {
                    color: '#a6d9ff',
                    // 24A2FF
                    // A6D9FF
                    // 66BAFF
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                      color: function (params) {
                        //自定义颜色
                        var colorList = [
                          '#A6D9FF', '#66BAFF', '#24A2FF'
                        ];
                        return colorList[params.dataIndex]
                      }
                    }
                  }
                }
              ]
            };

            this.chart.setOption(optionData);
          },

          mycookie3: function (id, mychartdata, mycharseriesdata, titleText) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            // PV 1,625
            const optionData = {
              //经营树状图分析
                tooltip: {},
                xAxis: {
                  type: "category",
                  axisLine: { onZero: false },
                  data: [
                    "2019-12-20",
                    "2019-12-21",
                    "2019-12-22",
                    "2019-12-23",
                    "2019-12-24",
                    "2019-12-25",
                    "2019-12-26"
                  ]
                },
                yAxis: {
                  min: 0,
                  max: 1,
                  type: "value",
                  axisLine: { onZero: false }
                },
                series: [
                  {
                    id: "a",
                    type: "line",
                    smooth: true,
                    symbolSize: symbolSize,
                    data: [0, 0, 0, 0, 0, 0.16, 0.62]
                  }
                ]
            };

            this.chart.setOption(optionData);
          },

          myFlowFunnel: function (id, mychartdata, mycharseriesdata, titleText) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              title: {
                text: titleText
              },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
              },
              toolbox: {
                feature: {
                  dataView: {readOnly: false},
                  restore: {},
                  saveAsImage: {}
                }
              },
              legend: {
                data: mychartdata
              },
              series: [
                {
                  name: titleText,
                  type:'funnel',
                  left: '10%',
                  width: '80%',
                  gap: 2,
                  label: {
                    // show: true,
                    // position: 'inside'
                    normal: {
                      formatter: '{b}预期: {d}%'
                    },
                    emphasis: {
                      position:'inside',
                      formatter: '{b}预期: {c}'
                    }
                  },
                  labelLine: {
                    length: 10,
                    lineStyle: {
                      width: 1,
                      type: 'solid'
                    }
                  },
                  itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  emphasis: {
                    label: {
                      fontSize: 20
                    }
                  },
                  data: mycharseriesdata
                }
              ]
            };

            this.chart.setOption(optionData);
          },

          myLineChart: function (id, mychartdata, mycharseriesdata, titleText) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              xAxis: {
                type: 'category',
                data: mychartdata
              },
              yAxis: {
                type: 'value'
              },
              tooltip: {
                trigger: 'axis'
              },
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'red' // 0% 处的颜色
                }, {
                  offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              series: [{
                data: mycharseriesdata,
                type: 'line'
              }]
            };

            this.chart.setOption(optionData);
          },

          myLineChartMutSmooth: function (id, mychartdata, mylineXAxisData, mycharseries, titleText) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            let seriesdatas =[];
            for (let i = 0; i < mycharseries.length ; i++) {
              let seriesdata =new Object();
              seriesdata.data =mycharseries[i].data;
              seriesdata.name =mycharseries[i].name;
              seriesdata.type ='line';
              seriesdata.smooth = true;
              seriesdatas.push(seriesdata);
            }
            const optionData = {
              title: {
                text: titleText
              },

              toolbox: {
                show : true,
                feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore : {show: true},
                  saveAsImage : {show: true}
                }
              },
              legend: {
                data: mychartdata
              },
              xAxis: {
                type: 'category',
                data: mylineXAxisData
              },
              yAxis: {
                type: 'value'
              },
              tooltip: {
                trigger: 'axis'
              },
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'red' // 0% 处的颜色
                }, {
                  offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              series: seriesdatas
            };

            this.chart.setOption(optionData);
          }

        }
      }
    }
  })
}

export default {
  install
}
